import { TabBar } from 'antd-mobile'
import { AppOutline, MessageFill, MessageOutline, MovieOutline, UnorderedListOutline } from 'antd-mobile-icons'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './css/Tabbar.module.css'
function Tabbar() {

    const navigate=useNavigate()

     const tabs = [
    {
      key: 'index',
      title: '首页',
      icon: <AppOutline />,

    },
    {
      key: 'Moments',
      title: '病友圈',
      icon: <MovieOutline />

    },
    {
      key: 'vvideo',
      title: '视频',
      icon: (active) =>
        active ? <MessageFill /> : <MessageOutline />,

    }
  ]
  return (
    <div>
       <TabBar className={styles.tab} onChange={(key)=>navigate(key)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default Tabbar
